<template>
  <div class="">
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>数据报表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->

    <div class="appbox" id="main" style="width: 100%; height: 700px">
      <div class="leftbox">
        <h3>组织架构</h3>
        <el-tree
          node-key="id"
          :data="treeform"
          class="custom-tree"
          @node-click="handleNodeClick"
        ></el-tree>
      </div>
      <div class="content">
        <div class="header">
          <h5>{{ name }}</h5>
          <div>
            <el-select
              size="mini"
              v-model="selectedCompany"
              placeholder="请选择公司"
              @change="handleCompanyChange"
            >
              <el-option
                v-for="company in options"
                :key="company.value"
                :label="company.label"
                :value="company.value"
              ></el-option>
            </el-select>
            <el-select
              clearable
              size="mini"
              v-model="selectedFarm"
              placeholder="请选择猪场"
            >
              <el-option
                v-for="farm in filteredFarms"
                :key="farm.value"
                :label="farm.label"
                :value="farm.value"
              ></el-option>
            </el-select>
            <el-date-picker
              size="mini"
              v-model="datevalue"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </div>

          <el-button size="mini" type="success" @click="search">查询</el-button>
        </div>

        <div class="bottom-header">
          <button
            v-for="(item, index) in statistics"
            :key="index"
            class="circle-button"
          >
            <div>
              <el-statistic
                :value="item.value"
                :title="item.title"
              ></el-statistic>
            </div>
          </button>
        </div>
        <div class="bottom-a">
          <div id="ma" v-auto-resize="option1"></div>
          <div class="more">
            <a
              target="_blank"
              class="more-link"
              href="https://echarts.apache.org/v4/zh/index.html"
              >更多</a
            >
          </div>
          <div v-auto-resize="option2" id="mb"></div>
          <div class="more">
            <a
              target="_blank"
              class="more-link"
              href="https://echarts.apache.org/v4/zh/index.html"
              >更多</a
            >
          </div>
        </div>
        <div v-auto-resize="option3" id="mc" style="width: 100%"></div>
      </div>
    </div>
  </div>
</template>

<script>
// 导入echarts
import { color } from 'echarts'
import _ from 'lodash'

export default {
  data() {
    return {
      statistics: [
        { title: '进行中项目', value: 2217, id: '122' },
        { title: '已接收项目', value: 1280, id: '123' },
        { title: '异常项目', value: 7, id: '124' },
        { title: '运送物资', value: 1380, id: '125' },
        { title: '运送箱子', value: 1627, id: '126' },
        { title: '平均耗时(天)', value: 1.32, id: '127' },
      ],
      name: '',
      datevalue: '',
      selectedCompany: '',
      selectedFarm: '',
      filteredFarms: [],
      startDate: '',
      endDate: '',
      option1: {
        title: {
          text: '耗时最短',
          left: '20',
          top: '10',
        },

        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        tooltip: {
          trigger: 'item',
        },

        series: [
          {
            top: '20',
            name: '来宾新好',
            type: 'pie',
            radius: '70%',
            data: [
              { value: 1048, name: '1' },
              { value: 735, name: '2' },
              { value: 580, name: '3' },
              { value: 484, name: '4' },
              { value: 300, name: '5' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 0,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      },
      option2: {
        title: {
          text: '物资使用',
          left: '30',
          top: '10',
        },

        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        tooltip: {
          trigger: 'item',
        },

        series: [
          {
            top: '20',
            name: '来宾新好',
            type: 'pie',
            radius: '70%',
            data: [
              { value: 1048, name: '6' },
              { value: 735, name: '7' },
              { value: 580, name: '8' },
              { value: 484, name: '9' },
              { value: 300, name: '10' },
            ],

            emphasis: {
              itemStyle: {
                shadowBlur: 0,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      },
      option3: {
        title: {
          text: '接收物资场线TOP5',
          top: '10',
        },
        grid: {},
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: 'category',

          data: [
            '廖平北区一线',
            '廖平北区2线',
            '廖平北区3线',
            '廖平北区4线',
            '廖平北区5线',
          ],
        },
        series: [
          {
            name: '接收物资',
            type: 'bar',
            data: [300, 400, 700, 800, 1100],
            itemStyle: {
              normal: {
                color: '#02CDE6 ',
              },
            },
          },
        ],
      },
      options: [
        {
          label: '腾讯',
          value: 'TX_00001',
          // 猪场下拉
          children: [
            {
              label: '腾讯_猪场1',
              value: 'TX_00001_ZC_1',
            },
            {
              label: '腾讯_猪场2',
              value: 'TX_00001_ZC_2',
            },
          ],
        },
        {
          label: '字节',
          value: 'ZJ_00002',
          // 猪场下拉
          children: [
            {
              label: '字节_猪场1',
              value: 'TX_00001_ZC_1',
            },
            {
              label: '字节_猪场1',
              value: 'TX_00001_ZC_2',
            },
          ],
        },
      ],

      // 需要跟请求的折线图数据合并的options
      // options: {
      //   title: {
      //     text: '用户来源',
      //   },
      //   tooltip: {
      //     trigger: 'axis',
      //     axisPointer: {
      //       type: 'cross',
      //       label: {
      //         backgroundColor: '#E9EEF3',
      //       },
      //     },
      //   },
      //   grid: {
      //     left: '3%',
      //     right: '4%',
      //     bottom: '3%',
      //     containLabel: true,
      //   },
      //   xAxis: [
      //     {
      //       boundaryGap: false,
      //     },
      //   ],
      //   yAxis: [
      //     {
      //       type: 'value',
      //     },
      //   ],
      // },
      // option: {
      //   backgroundColor: '#fffff',
      //   title: {
      //     text: '',
      //   },
      //   tooltip: {
      //     enabled: false,
      //   },
      //   legend: {
      //     data: '',
      //   },
      //   xAxis: {
      //     lineWidth: 2,
      //     type: 'category',
      //     color: 'white',
      //     dashStyle: 'solid', // 标示线的样式，默认是solid（实线），这里定义为长虚线longdashdot
      //     tickPixelInterval: 1,
      //     categories: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
      //     // lineWidth :0,//去掉x轴线
      //     tickWidth: 0, // 去掉刻度
      //     axisLabel: {
      //       show: false,
      //     }, // 去掉刻度数字
      //     axisLine: {
      //       lineStyle: {
      //         color: '#fff',
      //         width: 2,
      //       },
      //     },
      //     lineColor: 'white',
      //   },
      //   yAxis: {
      //     gridLineWidth: 0, // 去掉y轴方向的横线
      //     type: 'value',
      //     lineWidth: 2,
      //     lineColor: 'white',
      //     max: 25,
      //     title: {
      //       text: '',
      //       // text: '气量'
      //     },
      //     tickWidth: 0, // 去掉刻度
      //     axisLabel: {
      //       show: false,
      //     }, // 去掉刻度数字

      //     axisLine: {
      //       // y轴
      //       lineStyle: {
      //         color: '#fff',
      //         width: 2,
      //       },
      //     },
      //     axisTick: {
      //       // y轴刻度线
      //       show: false,
      //     },
      //     splitLine: {
      //       // 网格线
      //       show: false,
      //     },
      //   },
      //   series: [
      //     {
      //       name: '',
      //       type: 'line',
      //       // symbol: 'none',
      //       // smooth: true,
      //       symbol: 'circle', // 设定为实心点
      //       symbolSize: 10, // 设定实心点的大小
      //       itemStyle: {
      //         normal: {
      //           color: '#fff',
      //         },
      //       },
      //       data: [0, 2, 3, 2, 1, 0, 4, 5, 7, 8, 9, 4, 2, 1, 0, 0],
      //     },
      //   ],
      // },
      treeform: [
        {
          label: '新希望六和',
          children: [
            {
              id: 1,
              label: '新好1',
              children: [
                {
                  id: 2,
                  label: '广西1',
                },
              ],
            },
            {
              id: 3,
              label: '新好2',
              children: [
                {
                  id: 4,
                  label: '广西2',
                },
              ],
            },
            {
              id: 5,
              label: '新好3',
              children: [
                {
                  id: 6,
                  label: '广西3',
                },
              ],
            },
            {
              id: 7,
              label: '新好4',
              children: [
                {
                  id: 8,
                  label: '广西4',
                },
              ],
            },
          ],
        },
      ],
    }
  },
  methods: {
    handleNodeClick(data) {
      // console.log(data)
      this.name = data.label
      this.checkedKeys = [data.id]
      console.log(data)
    },
    handleCompanyChange(value) {
      const company = this.options.find((i) => i.value === value)
      if (company) {
        this.filteredFarms = company.children
        this.selectedFarm = '' // Reset farm selection when company changes
      }
    },
    search() {
      console.log('时间:', this.datevalue)
      // 在这里添加查询逻辑
    },
    resizeChart() {
      console.log(this)
    },
    // eacharts1() {
    //   this.myChart = echarts.init(document.getElementById('ma'))
    //   this.myChart.setOption(this.option1)
    //   this.myChart.on('click', (a) => {
    //     console.log(a.name)
    //   })
    // },
    // eacharts2() {
    //   this.myChart = echarts.init(document.getElementById('mb'))
    //   this.myChart.setOption(this.option2)
    //   this.myChart.on('click', (a) => {
    //     console.log(a.name)
    //   })
    // },
    // eacharts3() {
    //   this.myChart = echarts.init(document.getElementById('mc'))
    //   this.myChart.setOption(this.option3)
    //   this.myChart.on('click', (a) => {
    //     console.log(a.name)
    //   })
    // },
  },

  // mounted() {
  //   this.eacharts1()
  //   this.eacharts2()
  //   this.eacharts3()
  // },
  //   async mounted() {
  //     // 在页面dom元素加载完毕之后执行的钩子函数mounted
  //     // 基于准备好的dom，初始化echarts实例
  //     this.myChart = echarts.init(document.getElementById('main'))
  //     // 准备数据和配置项
  //     // 发送请求获取折线图数据
  //     const { data: res } = await this.$http.get('reports/type/1')
  //     if (res.meta.status !== 200) {
  //       return this.$message.error('获取折线图数据失败')
  //     }
  //     console.log(res)
  //     // 合并res.data和this.options
  //     const result = _.merge(res.data, this.options)
  //     // console.log(result)
  //     // 使用获取的数据展示图表
  //     this.myChart.setOption(result)
  //     // 创建防抖函数
  //     // this.debouncedResizeChart = _.debounce(this.resizeChart, 200)
  //   },
}
</script>
<style lang="less" scoped>
#ma {
  flex-grow: 1;
  width: 250px;
  height: 300px;
  background-color: #ffffff;
  border: 2px solid #dcdfe6;
  min-width: 0;
  border-right: 0;
}
#mb {
  background-color: #ffffff;
  margin-left: 20px;
  width: 250px;
  border: 2px solid #dcdfe6;
  border-right: 0;
  flex-grow: 1;
  min-width: 0;
  height: 300px;
}
#mc {
  display: flex;
  margin-top: -10px;
  border: 2px solid #dcdfe6;
  height: 0;
  flex-grow: 1;
  background-color: #ffffff;
  padding-left: 10px;
}
.appbox {
  display: flex;

  // padding: 5px;
}
/deep/ .el-tree-node__label {
  font-size: 16px;
  color: black;
}
.leftbox {
  margin: 10px 0px;
  flex: 0 0 200px;
  border: 2px solid #dcdfe6;
  background-color: #ffffff;
  h3 {
    padding: 10px;
  }
}
.content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: 10px;
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 2px solid #dcdfe6;
  width: 100%;
  height: 50px;
  padding: 0 20px;
  background-color: #ffffff;
  div {
    margin: 10px;
    display: flex;
  }
}

.bottom-header {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 10px;
  border: 2px solid #dcdfe6;
  width: 100%;
  height: 70px;
  background-color: #ffffff;
  padding-right: 20px;

  div {
    padding-left: 35px;
    width: 120px;
  }
}
/deep/.el-statistic .con .number {
  font-size: 15px;
  padding: 0 4px;
  color: #00b79e;
}
.bottom-a {
  display: flex;
  margin-top: 10px;
  // border: 2px solid #dcdfe6;
  width: 100%;
  height: 100px;
  flex-grow: 1;
}

.el-select {
  width: 150px;
}
.el-date-picker {
  width: 100px;
}
.circle-button {
  width: 35px; /* 按钮宽度 */
  height: 35px; /* 按钮高度 */
  border-radius: 50%; /* 使按钮成为圆形 */
  background-color: #00b79e; /* 按钮背景颜色 */
  border: none; /* 去掉边框 */
  cursor: pointer; /* 鼠标悬停时显示指针 */
  display: flex;
  justify-content: center;
  align-items: center;
}
.more {
  width: 55px;
  background-color: #ffffff;
  border: 2px solid #dcdfe6;
  border-left: 0;
  padding-right: 10px;
  margin-bottom: 23px;
  padding-top: 10px;
}
.more-link {
  color: blueviolet;
  text-decoration: none;
  font-size: 14px;
}
/* 改变选中项的背景色和文本颜色 */
.custom-tree .el-tree .el-tree-node__content:hover {
  background-color: #f5f7fa; /* 鼠标悬浮时的背景色 */
}

.custom-tree .el-tree .el-tree-node__content.is-current {
  background-color: #409eff; /* 选中项的背景色 */
  color: #fff; /* 选中项的文本颜色 */
}
</style>
